<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="保养信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'"
                   :model="ruleForm" labelWidth="auto">
          <uni-forms-item label="是否首保:" name="maintainType" :required="boole">
            <text class="maintainType"/>
            <uni-data-select v-if="boole" v-model="ruleForm.maintainType" :localdata="range"
                             @change="handleChange"
                             :clear="true" filterable/>
            <text v-else> {{ ruleForm.maintainType === '1' ? '是' : ruleForm.maintainType === '2' ? '否' : '' }}</text>
          </uni-forms-item>

          <uni-forms-item label="预计保养开始时间:" name="expectStartTime" :required="boole">
            <text class="expectStartTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择预计保养开始时间"
                                 return-type="string" v-model="ruleForm.expectStartTime"/>
            <text v-else>{{ ruleForm.expectStartTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="预计保养结束时间:" name="expectEndTime" :required="boole">
            <text class="expectEndTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择预计保养结束时间"
                                 :start="ruleForm.expectStartTime"
                                 return-type="string" v-model="ruleForm.expectEndTime"/>
            <text v-else>{{ ruleForm.expectEndTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="签约保养厂/保养厂:" name="maintainShopId" :required="boole">
            <text class="maintainShopId"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.maintainShopId" :localdata="options"
                                 dataKey="supplierName" dataValue="supplierId"
                                 placeholder="签约保养厂/保养厂"
                                 @change="handleMaintain"
                                 :clear="true" filterable/>
            <text v-else>{{ ruleForm.maintainShop || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="故障描述:" name="faultDescribe" :required="boole">
            <text class="faultDescribe"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.faultDescribe"
                           placeholder="请输入故障描述"/>
            <text v-else>{{ ruleForm.faultDescribe || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="保养厂报价:" name="maintainQuoter" :required="boole">
            <text class="maintainQuoter"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.maintainQuoter"
                           disabled
                           placeholder="请输入保养厂报价"/>
            <text v-else>{{ ruleForm.maintainQuoter || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="是否符合索赔理由:">
            <uni-data-select v-if="boole" v-model="ruleForm.reasonForClaim" :localdata="range"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.reasonForClaim === '1' ? '是' : ruleForm.reasonForClaim === '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="是否有同车型(处置车辆)对换配件:">
            <uni-data-select v-if="boole" v-model="ruleForm.swappingAccessories" :localdata="range"
                             :clear="true" filterable/>
            <text v-else>
              {{ ruleForm.swappingAccessories === '1' ? '是' : ruleForm.swappingAccessories === '2' ? '否' : '' }}
            </text>
          </uni-forms-item>

          <uni-forms-item v-if="ruleForm.reasonForClaim === '2'" label="不符合索赔理由:" name="claimantReason"
                          :required="boole">
            <uni-easyinput v-if="boole" v-model="ruleForm.claimantReason"
                           placeholder="请输入不符合索赔理由"/>
            <text v-else>{{ ruleForm.claimantReason || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="综合建议方案:" name="comprehensiveRecommendations"
                          :required="boole">
            <text class="comprehensiveRecommendations"/>
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490" v-model="ruleForm.comprehensiveRecommendations"
                           placeholder="请输入综合建议方案"/>
            <text v-else>{{ ruleForm.comprehensiveRecommendations || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="备注:">
            <uni-easyinput type="textarea" v-if="boole" v-model="ruleForm.maintainRemark"
                           :maxlength="490"
                           placeholder="请输入备注"/>
            <text v-else>{{ ruleForm.maintainRemark || '-' }}</text>
          </uni-forms-item>


        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
import {getInsuranceSelectList} from "@/api/maintain/maintainList";

export default {
  name: 'upkeepInfo',//保养信息
  props: {
    value: {
      type: Object,
      default: {}
    },
    boole: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    },
  },
  watch: {},
  data() {
    return {
      range: [
        {value: '1', text: '是'},
        {value: '2', text: '否'},
      ],
      options: [],
      rules: {
        maintainType: {
          rules: [
            {required: true, errorMessage: "请选择是否首保", validateTrigger: 'bind'},
          ]
        },
        expectStartTime: {
          rules: [
            {required: true, errorMessage: "请选择预计保养开始时间", validateTrigger: 'blur'},
          ],
        },
        expectEndTime: {
          rules: [
            {required: true, errorMessage: "请选择预计保养结束时间", validateTrigger: 'blur'},
          ],
        },
        maintainShopId: {
          rules: [
            {required: true, errorMessage: "请选择签约保养厂", validateTrigger: 'bind'},
          ],
        },
        faultDescribe: {
          rules: [
            {required: true, errorMessage: "请输入故障描述", validateTrigger: 'blur'},
          ],
        },
        maintainQuoter: {
          rules: [
            {required: true, errorMessage: "请输入保养厂报价", validateTrigger: 'blur'},
          ],
        },
        comprehensiveRecommendations: {
          rules: [
            {required: true, errorMessage: "请输入综合建议方案", validateTrigger: 'blur'},
          ],
        },
      }
    };
  },
  created() {
  },
  mounted() {
    this.handleList()
  },
  methods: {
    handleChange(val) {
      this.value.maintainType = this.ruleForm.maintainType = val
      this.handleCount(val)
    },

    handleCount(val) {
      if (Number(val) === 1) {
        this.value.maintainQuoter = this.ruleForm.maintainQuoter = 0
      } else {
        let num = 0
        for (let i = 0; i < this.value.carMaintainProjectList.length; i++) {
          num += Math.round(Number(this.value.carMaintainProjectList[i].price) * 100)
        }
        this.$set(this.value, 'maintainQuoter', (num / 100).toFixed(2))
        this.$set(this.ruleForm, 'maintainQuoter', (num / 100).toFixed(2))
      }
    },

    handleMaintain(val) {
      this.value.maintainShopId = this.ruleForm.maintainShopId = val.supplierId
      this.value.maintainShop = this.ruleForm.maintainShop = val.supplierName
    },

    handleList() {
      getInsuranceSelectList({businessTypeCode: "4"}).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate().then(res => {
          resolve();
        }).catch(err => {
          let key = ".flex-col" + ">>>" + "." + err[0].key;
          reject(key);
        })
      });
    },
  },
};
</script>

<style scoped lang=""></style>


